<extend name="Public/base"/>
<block name="sidebar">
    <include file="sidemenu"/>
</block>
<block name="body">
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/jquery.seat-charts.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/seatchart/seat.style.css">
    <script src="__STATIC__/jquery-2.0.3.min.js"></script>
    <script src="__STATIC__/seatchart/jquery.seat-charts.js"></script>
    <div class="main-title">
        <h2>查看演唱会</h2>
    </div>
    <div class="tab-wrap">
        <ul class="tab-nav nav">
            <li data-tab="tab1" class="current"><a href="javascript:void(0);">基 础</a></li>
        </ul>
        <div class="tab-content">
            <form action="{:U()}" method="post" class="form-horizontal">
                <!-- 基础 -->
                <div id="tab1" class="tab-pane in tab1">
                    <div class="form-item">
                        <label class="item-label">
                            演唱会<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <input type="text" name="title" class="text input-large" value="{$detail.title|default=''}">
                        </div>
                    </div>

                    <div class="form-item">
                        <label class="item-label">
                            场地<span class="check-tips"></span>
                        </label>
                        <div class="controls">
                            <input type="text" name="stage_name" class="text input-large" value="{$detail.stage_name|default=''}">
                        </div>
                    </div>
                    <div class="form-item">
                        <label class="item-label">大小<span class="check-tips"></span></label>
                        <div class="controls">
                            <input type="text" name="size" class="text input-large" value="{$detail.size|default=''}">
                        </div>
                    </div>

                    <div class="form-item">
                        <label class="item-label">场地视图<span class="check-tips"></span></label>
                        <div class="controls">
                            <div id="map">
                                <div id="seat-map">
                                    <div class="front">{$detail['map_name']}</div>
                                </div>
                                <div class="booking-details">
                                    <p>演唱会：<span>{$detail.title}</span></p>
                                    <p>时间：<span>{$concert.showtime|date='Y-m-d H:i',###}</span></p>
                                    <div id="legend"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-item">
                        <label class="item-label">是否展示</label>
                        <div class="controls">
                            <label class="radio"><input type="radio" name="status" value="1"
                                <eq name="detail['status']" value="1">checked="checked"</eq>
                                >是</label>
                            <label class="radio"><input type="radio" name="status" value="0"
                                <eq name="detail['status']" value="0">checked="checked"</eq>
                                >否</label>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <input type="hidden" name="id" value="{$info.id|default=''}">
                    <!--<button type="submit" id="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确定</button>-->
                    <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                </div>
            </form>
        </div>
    </div>
</block>

<block name="script">
    <script type="text/javascript">
        function setMap() {
            var str = "{$detail['map']}";
            return str.split(",");
        }
        function setSetas() {
            var str = "{$detail['areas']}";
            var s1 = eval('(' + str + ')');
            return s1;
        }
        function setItems() {
            var str = "{$detail['items']}";
            var s3 = str.split(",");
            var s4 = [];
            for (var i=0; i<s3.length; i++){
                var tmp = s3[i].split("&");
                s4.push(tmp);
            }
            return s4;
        }

        $(document).ready(function () {
            var map = setMap();
            var seats = setSetas();
            var items = setItems();
            var cart = $('#selected-seats');
            var counter = $('#counter');
            var total = $('#total');
            var seatLabel = 1;
            var last = 0;
            var sc = $('#seat-map').seatCharts({
                map: map,
                seats: seats,
                naming: {
                    top: false,
                    getLabel: function (character, row, column) {
                        if (last != row) {
                            last = row;
                            seatLabel = 1;
                        }
                        if (character != '_') {
                            return seatLabel++;
                        } else {
                            return 0;
                        }
                    }
                },
                legend : {
                    node : $('#legend'),
                    items : items
                },
                click: function () {
                    if (this.status() == 'available') {
                        $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座<a href="#" class="cancel-cart-item">&times;</a></li>')
                                .attr('id', 'cart-item-' + this.settings.id)
                                .data('seatId', this.settings.id)
                                .appendTo(cart);
                        counter.text(sc.find('selected').length + 1);
                        total.text(recalculateTotal(sc) + this.data().price);
                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        counter.text(sc.find('selected').length - 1);
                        //and total
                        total.text(recalculateTotal(sc) - this.data().price);

                        //remove the item from our cart
                        $('#cart-item-' + this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
//            setInterval(function () {
//                $.ajax({
//                    type: 'get',
//                    url: '/bookings/get/100',
//                    dataType: 'json',
//                    success: function (response) {
//                        //iterate through all bookings for our event
//                        $.each(response.bookings, function (index, booking) {
//                            //find seat by id and set its status to unavailable
//                             sc.status(booking.seat_id, 'unavailable');
//                        });
//                    }
//                });
//            }, 10000); //every 10 seconds
            //this will handle "[cancel]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });

            //let's pretend some seats have already been booked
//            sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
        });
        function recalculateTotal(sc) {
            var total = 0;
            //basically find every selected seat and sum its price
            sc.find('selected').each(function () {
                total += this.data().price;
            });
//            $('#submit').attr('disabled', true);
            return total;
        }
    </script>
</block>
